import { createRouter, createWebHistory } from "vue-router";
import Layout from "../views/Layout.vue";
import Home from "../views/Home.vue";
import Ecommerce from "../views/Ecommerce.vue";
import Analytics from "../views/Analytics.vue";
import NotFound from "@/components/NotFound.vue";

const routes = [
  {
    path: "/",
    name: "Layout",
    component: Layout,
    children: [
      {
        path: "index",
        name: "index",
        component: Home,
      },
      {
        path: "dashboard-ecommerce",
        name: "Ecommerce",
        component: Ecommerce,
      },
      {
        path: "dashboard-analytics",
        name: "Analytics",
        component: Analytics,
      },
    ],
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: "/:pathMatch*", name: "NotFound", component: NotFound },
];

const router = createRouter({
  mode: 'history',
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
